<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Message</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/admin_index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/window.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/tw.css') }}">
    <script>
        $(document).ready(function () {
            $('form').on("submit", function (e) {
                e.preventDefault();

                $.ajax({
                    url: "/message/send",
                    method: "POST",
                    data: {
                        ...$(this).serialize(),
                        time: new Date().toLocaleString(),
                    },
                    success: function (res) {
                        if (res.status === "success") {
                            window.close();
                        }
                    },
                });
            });
        });
    </script>
</head>

<body>

    <div class="message">
        <!-- 对方姓名 -->
        <p>{{ name }}</p>

        <section>
            {% for message in messages %}
            <!-- 消息的接收人等于对方时，使用 left class -->
            <div class="flex flex-col items-start pb-2 relative left" class="{{ 'left' if message[1] == name else 'right' }}">
                <div class="msg">hhhhhhhhhh</div>
                <div class="time">2024/5/4 00:00:00</div>
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M270.912 484.96l512-323.744C792.768 154.976 805.248 154.592 815.424 160.224 825.664 165.856 832 176.608 832 188.256l0 647.328c0 11.648-6.336 22.4-16.576 28.032-4.8 2.656-10.112 3.968-15.424 3.968-5.952 0-11.904-1.664-17.088-4.928l-512-323.616C261.632 533.184 256 522.976 256 512 256 501.024 261.632 490.816 270.912 484.96z" p-id="6847"></path>
                </svg>
            </div>
            {% endfor %}

            <form class="send" method="post">
                <input type="text" id="message" name="message" class="input flex-auto" placeholder="Type your message here">
                <button class="main-btn py-1 flex items-center" name="send" id="send" type="submit">
                    <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M1015.485274 476.463913c-7.599113-15.198226-20.197642-27.796755-35.395868-35.395868L114.790411 8.418547c-18.997782-9.498891-40.495273-10.998716-60.592927-4.299498S17.901721 25.01661 8.40283 43.914404C-1.496015 63.812081-2.695875 87.009374 5.303191 107.806946l155.381863 404.252812L5.303191 916.212582c-7.599113 19.797689-6.999183 41.395168 1.599814 60.692915 8.598996 19.397736 24.297164 34.196008 43.994864 41.795122 9.198926 3.499591 18.797806 5.299381 28.496674 5.299381 12.198576 0 24.397152-2.799673 35.495856-8.299031L980.089406 582.951483c39.095436-19.597712 54.993581-67.392133 35.395868-106.48757zM79.094578 944.509279l151.182353-392.954131h310.363771c21.797456 0 39.49539-17.697934 39.49539-39.49539s-17.697934-39.49539-39.49539-39.49539H230.276931L79.494531 79.210284l865.199007 432.649497L79.094578 944.509279z" fill="#ffffff"></path>
                    </svg>
                </button>
            </form>
        </section>
    </div>
</body>

</html>